<template>
  <div>
    <div class="bt_contain">
      <p class="bt_title">新闻中心</p>
      <div class="message_content">
        <div class="message_item"   v-for="item in newlist" :key="item.id" @click="entryNewsItem">
          <div class="message_image">
            <img :src="item.image" :onerror="defalutLogoUrl"  alt="" />
          </div>
          <div class="message_word">
            <p>{{item.content}}</p>
            <b>发布时间：{{item.pubdate}}</b>
          </div>
        </div>
         <!--  -->
      
      </div>
     
    </div>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagination.pagenum"
        :page-sizes="[3, 5, 10, 15]"
        :page-size="pagination.pagesize"
        layout=" prev, pager, next, jumper"
        :total="pagination.total"
      >
      </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newInfo: {
        total: 5,
        list: "",
      },
      pagination: {
        pagenum: 1,
        pagesize: 4,
        total: 7,
      },
      newlist: [],
      // 图片加载失败默认显示：
       defalutLogoUrl:'this.src="'+  require("../../assets/img/6.jpg")  +'"',
    };
  },
  methods: {
    // 后台数据展示
    async getNewList() {
      const res = await this.http.get("/news/select", this.pagination);
      this.newlist = res.list;
      this.pagination.total = res.total;
      console.log(this.newlist);
    },
    //  监听pagesize的改变
    handleSizeChange(newSize) {
      this.pagination.pagesize = newSize;
      this.getNewList();
    },
    handleCurrentChange(newPage) {
      this.pagination.pagenum = newPage;
      this.getNewList();
    },
    entryNewsItem(){
      this.$router.push('/next')
    }
  },
  created() {
    this.getNewList();
  },
};
</script>

<style scoped>
.bt_contain {
  width: 100%;
  height: 700px;
  /* background: pink; */
  margin: 0;
  text-align: center;
  z-index: 1000;
}
.bt_title {
  margin: 0;
  position: relative;
  top: 30px;
  padding: 0 20px;
  font-size: 18px;
  font-weight: 400px;
  display: inline-block;
  border-left: 5px solid rgba(5, 160, 69, 1);
}
.message_content {
  width: 500px;
  height: 550px;
  /* background: pink; */
  border: 2px solid #333;
  margin: 0 auto;
  position: relative;
  top: 50px;
  z-index: 1000;
}
.message_item {
  width: 400px;
  height: 120px;
  background: white;
  position: relative;
  margin: 0 auto;
  top: 5px;
  border-bottom: 2px solid #333;
}
.message_image {
  width: 80px;
  height: 80px;
  background: #ededed;
  position: relative;
  left: 20px;
  top: 20px;
  float: left;
}
.message_image img{
    width: 100%;
    height: 100%;
}
.message_word {
  display: block;
  position: absolute;
  margin-left: 120px;
  margin-top: 20px;
  /* background: yellow; */
  width: 270px;
  text-align: left;
}
.message_word p {
  margin-top: 0;
  display: block;
  /* background: blue; */
  width: 100%;
  height: 60px;
  font-size: 14px;
  font-weight: 600;
}
.message_word b {
  font-size: 12px;
  display: block;
  margin-top: -10px;
  font-weight: 400;
}
.el-pagination{
    z-index: 1;
    /* border: 2px solid red; */
    /* display: block; */
    display: flex;
    position: relative;;
    top: -50px;
    width: 350px;
    margin: 0 auto;
    bottom: 0;
}
</style>
